<template>
	<view class="content">
		<view class="addMessage_item flex_layout">
			<view class="left_name">姓名</view>
			<!--个人身份进入-->
			<block v-if="yuyueType==1">
			  <view class="right_input"><input type="text" v-model="realname" placeholder="请输入真实姓名" placeholder-style="color: #999" value="" /></view>
			</block>
			<!--工作人员身份进入-->
			<block v-if="yuyueType==2">
			  <view class="right_input"><span>{{realname}}</span></view>
			</block>
		</view>
		<view class="addMessage_item flex_layout">
			<view class="left_name">电话</view>
			<!--个人身份进入-->
			<block v-if="yuyueType==1">
			  <view class="right_input"><input type="number" v-model="phone" placeholder="请输入电话号码" placeholder-style="color: #999" value="" /></view>
			</block>
			<!--工作人员身份进入-->
			<block v-if="yuyueType==2">
			  <view class="right_input"><span>{{phone}}</span></view>
			</block>
		</view>
		<view class="addMessage_item flex_layout">
			<view class="left_name">套餐名称</view>
			<view class="right_input"><text>{{nametext}}</text></view>
		</view>
		<view class="addMessage_item flex_layout">
			<view class="left_name">门店名称</view>
			<view class="right_input"><text>{{name}}</text></view>
		</view>
		<view class="addMessage_item flex_layout">
			<view class="left_name">预约时间</view>
			<view class="right_input">
				<picker mode="multiSelector" :value="dateTime" @change="changeDateTime" @columnchange="changeSingleDate" :range="dateTimeArray">
					<view class='lableBox flex_layout'>
						<view class="otherCheck" :class="newTime=='请选择预约时间'?'':'otherCheck_color'">{{newTime}}</view>
						<view class="lableBox_img"><image src="../../static/images/right.png" mode=""></image></view>
					</view> 
				</picker>
			</view>
		</view>
		<view class="effectiveDate">有效期：{{coupon_begintime}}至{{coupon_endtime}}</view>
		<!--个人身份进入-->
		<block v-if="yuyueType==1">
			<view class="add_btn">
				<block v-if="id">
					<button type="default" @click="affirm">修改预约</button>
				</block>
				<block v-else>
					<button type="default" @click="affirm">提交预约</button>
				</block>
			</view>
		</block>
		<!--工作人员身份进入-->
		<block v-if="yuyueType==2">
			<view class="add_btn flex_layout">
				<button type="default" class="noPass_through" data-statuslist='2' @click="affirm">审核失败</button>
				<button type="default" class="pass_through" data-statuslist='1' @click="affirm">审核通过</button>
			</view>
		</block>
	</view>
</template>

<script>
	const { dateTimePicker} = require('../../common/dateTimePicker.js');
	export default {
		data() {
			return {
				editContent:'',
				id:'',
				dateTime: null,
				dateTimeArray: null,
				startYear: 2020,
				newTime:'请选择预约时间',
				clinic_id:'',
				nametext:'',
				coupon_id:'',
				phone:this.$common.userInfo().mobile?this.$common.userInfo().mobile:'',
				realname:this.$common.userInfo().realname?this.$common.userInfo().realname:'',
				name:'',
				type:'',
				coupon_begintime:'',
				coupon_endtime:'',
				yuyueType:'',
				selectDate:'',
				yearTime:'',
				monthTime:'',
				dayTime:''
			}
		},
		onLoad(option) {
			console.log("option: ",option);
			var that=this;
			
			let date = new Date();	
			let endYear = date.getFullYear();
			let moth=date.getMonth()+1
			if(moth<10){
				moth='0'+moth
			}
			console.log(moth);
			let day=date.getDate()
			if(day<10){
				day='0'+day
			}
			
			this.selectDate=endYear+'-'+moth+'-'+day+' '+'09:00'
			console.log(this.selectDate);
			this.initTime()
			var id=option.id?option.id:''
			this.id=id
			this.clinic_id=option.clinic_id;
			this.nametext=option.nametext;
			this.coupon_id=option.coupon_id;
			console.log(this.clinic_id);
			console.log(this.coupon_id);
			this.name=option.name
			//判断个人还是员工
			this.yuyueType=option.yuyueType
			//判断是新增还是修改
			this.type=option.type
			//if(that.id){
				this.content();
			//}
			if(this.type==2){
				uni.setNavigationBarTitle({
					title:"修改预约"
				})
			}
			if(this.yuyueType==2){
				uni.setNavigationBarTitle({
					title:"审核预约"
				})
			}
		},
		methods: {
			content: function(){
				var that=this;
				that.$api.getOneAppointment(
					{
					id:that.id,
					coupon_id:that.coupon_id
					},
					res => {
						if(res.code==1){
							var editContent=res.data
							//修改状态下返回的预约信息
							if(that.type==2){
								that.clinic_id=editContent.clinic_id;
								that.coupon_id=editContent.coupon_id;
								that.realname=editContent.realname
								that.phone=editContent.phonetext
								that.newTime=editContent.appointmenttime
							}
							//两种状态都会返回的信息
							that.name=editContent.name
							that.nametext=editContent.coupon_name;
							that.coupon_begintime=editContent.coupon_begintime
							that.coupon_endtime=editContent.coupon_endtime
						}
						if(res.code==0){
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000
							})
						}
						
					}
				)
			},
			
			affirm: function(e){
				var that=this;
				var statuslist=e.currentTarget.dataset.statuslist
				if(statuslist){
					uni.showModal({
					    title: '提示',
					    content: '确认执行此操作？',
					    success: function (res) {
					        if (res.confirm) {
					            that.newAppointment(statuslist)
					        } else if (res.cancel) {
					            //console.log('用户点击取消');
					        }
					    }
					});
				}else{
					that.newAppointment(statuslist)
				}
				
			},
			newAppointment(statuslist){
				var that=this;
				if(that.realname==''){
					uni.showToast({
						title: '请填写真实姓名',
						icon: 'none',
						duration: 2000,
					})
				  return false; 
				}
				if(that.phone==''){
					uni.showToast({
						title: '请填写手机号',
						icon: 'none',
						duration: 2000,
					})
				  return false; 
				}
				if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.phone))){
					uni.showToast({
						title: '手机号码有误',
						icon: 'none',
						duration: 2000,
					})
				  return false; 
				}
				if(that.newTime=='请选择预约时间'){
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 2000,
					})
					return false; 
				}
				
				var data=[];
				data['id']=that.id
				data['phonetext']=that.phone
				data['clinic_id']=that.clinic_id
				data['realname']=that.realname
				data['coupon_id']=that.coupon_id
				data['appointmenttime']=that.newTime
				data['type']=that.yuyueType
				//审核状态
				if(statuslist){
					data['statuslist']=statuslist
				}
				
				that.$api.getSubAppointment(
					data,
					res => {
						if (res.code == 1) {
							if(!statuslist){
								if(that.id){
									uni.showToast({
										title: '修改成功',
										icon: "success",
										duration: 1000
									})
									setTimeout(function(){
										uni.navigateBack();
									},1000)
								}else{
									uni.showToast({
										title: '预约成功',
										icon: "success",
										duration: 1000
									})
									setTimeout(function(){
										that.$common.navigateBack(2);
										// uni.navigateTo({
										// 	url:'../index/myyuyue?type='+that.yuyueType
										// })
									},1000)
								}
								
							}else{
								//工作人员审核提示
								uni.showToast({
									title: '操作成功',
									icon: "success",
									duration: 1000
								})
								setTimeout(function(){
									uni.navigateBack();
									// uni.navigateTo({
									// 	url:'../index/myyuyue?type='+that.yuyueType+'&clinic_id='+that.clinic_id
									// })
								},1000)
							}
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000
							})
						}
					}
				)
				// uni.showToast({
				// 	title:'预约成功',
				// 	icon:'success'
				// })
				// setTimeout(function(){
				// 	uni.navigateTo({
				// 		url:'../index/detail'
				// 	})
				// },1500)
			},
			initTime(){
				let date = new Date();
				
				let endYear = date.getFullYear();

				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, 2050,this.selectDate);
				//console.log(obj);
				// 精确到分的处理，将数组的秒去掉
				// let lastArray = obj.dateTimeArray.pop();
				// let lastTime = obj.dateTime.pop();
 
				this.dateTimeArray=obj.dateTimeArray
				//console.log("this.dateTimeArray: ",this.dateTimeArray);
				this.dateTime=obj.dateTime
				console.log("this.dateTime: ",obj.dateTime);
			},
			changeDateTime(e) {
				let dateTimeArray = this.dateTimeArray;
				let dateTime = e.detail.value;
				let newTime = dateTimeArray[0][dateTime[0]] + dateTimeArray[1][dateTime[1]]+dateTimeArray[2][dateTime[2]] + dateTimeArray[3][dateTime[3]]; //+ ':' + dateTimeArray[4][dateTime[4]]+':'+ dateTimeArray[5][dateTime[5]];
				this.dateTime = dateTime;
				this.newTime=newTime
			 },
			 changeSingleDate(e){
				 //console.log(this.dateTimeArray);
				 var column=e.detail.column
				 var value=e.detail.value
				 var dateTimeArray=this.dateTimeArray;
				 var newTime=this.selectDate;
				 this.yearTime=newTime.slice(0,4)
				 this.monthTime=newTime.slice(5,7)
				 this.dayTime=newTime.slice(8,10)
				 if(column==0){
					 //滑动了年份
					 this.yearTime=dateTimeArray[column][value].slice(0,4);
					 this.selectDate=this.yearTime+'-'+this.monthTime+'-'+this.dayTime+' '+'09:00'
						let obj = dateTimePicker(this.startYear, 2050,this.selectDate);
						this.dateTimeArray=obj.dateTimeArray
				 }else if(column==1){
					 //滑动了月份
					 console.log(dateTimeArray[column][value]);
					 this.monthTime=dateTimeArray[column][value].slice(0,2);
					 this.selectDate=this.yearTime+'-'+this.monthTime+'-'+this.dayTime+' '+'09:00'
					 let obj = dateTimePicker(this.startYear, 2050,this.selectDate);
					 this.dateTimeArray=obj.dateTimeArray
				 }else if(column==2){
					 //滑动了日
					 console.log(dateTimeArray[column][value]);
					 this.dayTime=dateTimeArray[column][value].slice(0,2);
				 }
			 }
		}
	}
</script>

<style>
	view{box-sizing: border-box;}
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.addMessage_item{padding: 50upx 30upx; border-bottom: 1px solid #f2f2f2;}
	.addMessage_item:first-child{border-top: 1px solid #f2f2f2;}
	.left_name{color: #333; font-size: 30upx; width: 120upx;}
	.right_input{width: 570upx; padding-left: 50upx;}
	.right_input text{display: block; color: #333; font-size: 30upx;}
	.right_input input{color: #333; font-size: 30upx;}
	.otherCheck{color: #999; font-size: 30upx;}
	.otherCheck_color{color: #333;}
	.lableBox{justify-content: space-between;}
	.lableBox_img image{width: 13upx; height: 23upx;}
	.add_btn{padding: 30upx; margin-top: 30upx; justify-content: space-around;}
	.add_btn button{height: 60upx; width: 100%; font-size: 30upx; color: #fff; margin: 0; padding: 0; line-height: 60upx; background: #2562a1; border-radius: 50px;}
	.add_btn button.pass_through{width: 40%;}
	.add_btn button.noPass_through{width: 40%; border: 1px solid #2562a1; color: #2562a1; background: none;}
	.effectiveDate{color: #999; font-size: 24upx; padding: 15upx 30upx;}
</style>
